<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新 增
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search">
            <el-row :gutter="20">
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.name"
                  size="medium"
                  placeholder="老人姓名"
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.mobile"
                  size="medium"
                  placeholder="联系方式"
                ></el-input>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-date-picker
                  v-model="selectForm.start_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="预约开始"
                  size="medium"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 45%"
                ></el-date-picker>
                <span style="padding: 0 10px">~</span>
                <el-date-picker
                  v-model="selectForm.end_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="预约结束"
                  size="medium"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 45%"
                ></el-date-picker>
                &nbsp;
              </el-col>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <el-select
                  v-model="selectForm.source"
                  size="medium"
                  clearable
                  placeholder="预约来源"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                  <el-option :key="1" label="女" :value="1"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  class="fr"
                  @click="searchHandleClick"
                >
                  搜索
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @cancelOrder="cancelOrder"
        @changeForMal="changeForMal"
      ></app-table>
    </div>
    <el-dialog
      title="入住登记"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <common-form
          :key="key2"
          :gutter="30"
          :data="allData"
          @handleMap="handleMap"
        ></common-form>
      </div>
    </el-dialog>
    <el-dialog
      title="预约登记"
      :visible.sync="dialogVisibleForm"
      width="35%"
      :before-close="closeDialogForm"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <reg-form
          :key="key"
          :gutter="30"
          :data="formData"
          @save="save"
          @cancel="cancel"
        ></reg-form>
      </div>
    </el-dialog>
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import commonForm from "@/components/CommonForm/index";
  import regForm from "@/components/CommonForm/regForm";
  import { getList, resetStatus } from "@/api/appointmentReg";
  import { changeList } from "@/api/oldermanager";
  import appMap from "@/components/AppMap/index";
  export default {
    name: "Index",
    components: { appTable, commonForm, regForm, appMap },
    data() {
      return {
        keyword: "",
        key: Math.random(),
        key2: Math.random(),
        mapVisible: false,
        dialogVisible: false,
        dialogVisibleForm: false,
        allData: {},
        formData: {},
        appFormData: {},
        rules: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "age", label: "年龄" },
          { prop: "sex", label: "性别", formatter: this.genderFormatter },
          { prop: "mobile", label: "联系方式" },
          {
            prop: "is_care",
            label: "能否自理",
            formatter: this.isCareFormatter,
          },
          { prop: "type", label: "预约床型", formatter: this.typeFormatter },
          { prop: "reserve_time", label: "预约日期" },
          {
            prop: "status",
            label: "入住状态",
            formatter: this.statusFormatter,
          },
          { prop: "source", label: "来源" },
          { prop: "remark", label: "备注" },
        ],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      statusFormatter(row, column) {
        if (row.status == 0) {
          return "已取消";
        } else if (row.status == 1) {
          return "已预约";
        } else if (row.status == 2) {
          return "已预约";
        } else if (row.status == 3) {
          return "已转入住";
        }
      },
      genderFormatter(row, column) {
        if (row.sex == 1) {
          return "男";
        } else if (row.sex == 2) {
          return "女";
        }
      },
      isCareFormatter(row, column) {
        if (row.is_care == 0) {
          return "否";
        } else if (row.is_care == 1) {
          return "是";
        }
      },
      typeFormatter(row, column) {
        if (row.type == 1) {
          return "自理型";
        } else if (row.type == 2) {
          return "介助型";
        } else if (row.type == 3) {
          return "介护型";
        } else if (row.type == 4) {
          return "特护型";
        }
      },
      getTableData(data) {
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 0);
          }
        });
      },
      handleAdd() {
        this.key = Math.random();
        this.dialogVisibleForm = true;
        this.formData = {};
      },
      save(data) {
        this.dialogVisibleForm = false;
        this.getTableData();
      },
      cancel() {
        this.dialogVisibleForm = false;
      },
      handleCheck() {
        this.key = Math.random();
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          this.dialogVisibleForm = true;
          this.formData = Object.assign({}, this.currentSelectedData[0]);
        }
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.formData = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.formData.id,
              };
              getList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      searchHandleClick() {
        this.getTableData(this.selectForm);
      },
      cancelOrder(rows) {
        this.$confirm("确定取消预约, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              id: rows.rows[0].id,
              status: 0,
            };
            resetStatus("put", params).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "取消成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      changeForMal(rows) {
        this.key2 = Math.random();
        this.dialogVisible = true;
        let temp = Object.assign({}, rows.rows[0]);
        temp.reserve_id = temp.id;
        delete temp.id;
        this.allData.base = temp;
        console.log(this.allData);
      },
      closeDialog() {
        this.dialogVisible = false;
        this.getTableData();
      },
      closeDialogForm() {
        this.dialogVisibleForm = false;
      },
      handleMap(keyword) {
        this.key2 = Math.random();
        this.mapVisible = true;
        if (keyword) this.keyword = keyword;
      },
      closeMap() {
        this.mapVisible = false;
      },
      result(e) {
        console.log(e);
        this.mapVisible = false;
        this.$set(this.base, "lng", e.lng);
        this.$set(this.base, "lat", e.lat);
        this.$set(this.base, "address", e.address);
        this.$set(this.formData, "base", this.base);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        width: 100%;
        .search-title {
          flex: 0 0 48px;
          width: 48px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
      }
    }
    .form-footer {
      padding-left: 100px;
    }
  }
</style>
